<template>
  <el-dialog
    title="二代邀请码"
    v-model="dialogVisible"
    width="600px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <div class="link-box">
        <p class="title">邀请链接</p>
        <div class="link-info">
          <span>{{ linkUrl }}</span>
          <el-button
            type="primary"
            @click="copyLink">
            复制链接
          </el-button>
        </div>
        <p class="hint">将邀请链接发给下级伙伴，请伙伴点击链接关联</p>
      </div>

      <div class="code-box">
        <p class="title">邀请二维码</p>
        <div class="code-info">
          <img :src="qrcodeUrl"  />
        </div>
        <p class="hint">将二维码发给下级伙伴，请伙伴用微信扫码关联，二维码长期有效</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
  import useClipboard from 'vue-clipboard3';
  const { toClipboard } = useClipboard();

  import { getInviteLink } from '@/api/index';

  import qrcode from 'qrcode';
  import { ElMessage } from 'element-plus';

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  let qrcodeUrl = ref('');
  let linkUrl = ref('');

  function generateCodeFn() {
    getInviteLink('PARTNER').then(res => {
      linkUrl.value = res.data;
      qrcode.toDataURL(res.data, (err, url) => {
        if (err) {
          console.log(err);
        } else {
          qrcodeUrl.value = url;
        }
      });
    });
  }

  const copyLink = async () => {
    try {
      await toClipboard(linkUrl.value);
      ElMessage.success('复制成功');
    } catch (e) {
      console.error(e);
    }
  };

  onMounted(() => {
    generateCodeFn();
  });
</script>

<style lang="scss" scoped>
  .link-box {
    .title {
      font-size: 16px;
      font-weight: 700;
    }

    .link-info {
      display: flex;
      align-items: center;
      margin: 5px 0;

      span {
        margin-right: 15px;
        line-height: 20px;
      }
    }
  }
  .code-box {
    margin-top: 40px;

    .title {
      font-size: 16px;
      font-weight: 700;
    }
    .code-info {
      width: 183px;
      height: 183px;
      margin: 15px 0;
      padding: 1px;
      border-radius: 5px;
      border: 1px solid #ebebeb;
      background-color: #f5f5f5;
      box-sizing: border-box;
    }
  }
</style>
